<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta type="description" content="总代理-进货单">
    <title>进货单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./plugs/layui/css/layui.css">
    <link rel="stylesheet" href="./plugs/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="./css/publicHead.css">
    <link rel="stylesheet" href="./css/receipt.css">
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<!--顶部导航开始-->
		<div class="layui-header">
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<nav class="navbox">
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href=""><i class="fa fa-user fa-fw" aria-hidden="true"></i> 陈小姐</a>
					</li>
					<li class="layui-nav-item">
						<a href=""><i class="fa fa-desktop fa-fw" aria-hidden="true"></i> 我的工作台</a>
					</li>
					<li class="layui-nav-item">
						<a href=""><i class="fa fa-folder fa-fw" aria-hidden="true"></i> 收藏夹</a>
					</li>
					<li class="layui-nav-item">
						<a href=""><i class="fa fa-shopping-cart fa-fw" aria-hidden="true"></i> 进货单</a>
					</li>
					<li class="layui-nav-item">
						<a href=""><i class="fa fa-headphones fa-fw" aria-hidden="true"></i> 我连客服</a>
					</li>
					<li class="layui-nav-item">
						<a href=""><i class="fa fa-commenting-o fa-fw" aria-hidden="true"></i> 我信</a>
						<dl class="layui-nav-child">
	              <dd><a href="javascript:;"><i class="fa fa-user-circle" aria-hidden="true"></i>&emsp;基本资料</a></dd>
	              <dd><a href="javascript:;"><i class="fa fa-gear" aria-hidden="true"></i>&emsp;安全设置</a></dd>
	              <dd><a href="javascript:;"><i class="fa fa-sign-out" aria-hidden="true"></i>&emsp;注销</a></dd>
	          </dl>
					</li>
					<li class="layui-nav-item">
						<a href=""><i class="fa fa-headphones" aria-hidden="true"></i> 我要供货</a>
					</li>
				</ul>
			</nav>
		</div>
		<!--顶部导航结束-->
		
			<!-- logo + 搜索  开始-->
		<div class="grid_total">
			<div class="grid_wrap">
				<div class="grid_logo">
					<a href="javascript:;"><img src="img/grid_logo.png" /></a>
				</div>
				<div class="grid_search">
					<div class="search_box">
            <form action="" class="layui-form">
              <select name="city" lay-verify="required">
                <option value="0" selected="">全部分类</option>
                <option value="1">店铺</option>
                <option value="2">商品</option>
                <option value="3">视频</option>
                <option value="4">新闻</option>
                <option value="4">问问</option>
                <option value="4">相册</option>
              </select>
              <div class="layui-unselect layui-form-select">
              	<div class="layui-select-title">
              		<input type="text" placeholder="请选择" value="全部分类" readonly="" class="layui-input layui-unselect">
              		<i class="layui-edge"></i>
              	</div>
              	<dl class="layui-anim layui-anim-upbit">
              		<dd lay-value="0" class="layui-this">全部分类</dd>
              		<dd lay-value="1" class="">店铺</dd>
              		<dd lay-value="2" class="">商品</dd>
              		<dd lay-value="3" class="">视频</dd>
              		<dd lay-value="4" class="">新闻</dd>
              		<dd lay-value="4" class="">问问</dd>
              		<dd lay-value="4" class="">相册</dd>
              	</dl>
              </div>
              <input type="text" class="layui-input search-content-word">
              <input type="button" value="搜索" class="layui-btn search-content-btn">
            </form>
					</div>
					
				</div>
			</div>
				
			</div>
			<!-- logo + 搜索  结束-->
	
		<div class="container">
	    <!--主体内容开始-->
	    <div class="grid_wrap" id="grid_wrap">
				<!--<table class="layui-table" lay-filter="myGoodsTable" lay-data="{height:400, widh:1200, url:'json/receipt.json', page:true, id:'myGoodsTable'}">
				  <thead>
				    <tr>
				    	<th lay-data="{checkbox:true, width: 50}"></th>
				      <th lay-data="{field:'url', width:105, templet: '#allCheckTpl'}">全选</th>
				     	<th lay-data="{field:'title', width:360, templet: '#goodsTitleTpl'}">title</th>
				      <th lay-data="{field:'unitPrice', width:150}">单价</th>
				      <th lay-data="{field:'goodsNum', width:195}">数量</th>
				      <th lay-data="{field:'subtotal', width:185, templet: '#subtotalTpl'}">小计</th>
				      <th lay-data="{fixed:'right', width:140, align:'center', toolbar: '#barDemo'}">操作</th>
				    </tr>
				  </thead>
				</table>-->
				<!--<script type="text/html" id="allCheckTpl">
				  <a href="javascript:;" class="layui-table-link" target="_blank">
				  	<img src="{{d.url}}" width="100px" height="100px" />
				  </a>
				</script>	
				<script type="text/html" id="goodsTitleTpl">
				  <p>{{d.title}}</p>
				</script>
				<script type="text/html" id="subtotalTpl">
				  <p>{{d.subtotal.subtotalPrice}}</p>
				  <p>{{d.subtotal.weight}}</p>
				</script>
				<script type="text/html" id="barDemo">
					<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a> <br />
				  <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">添加关注</a> <br />
					<a class="layui-btn layui-btn-mini" lay-event="edit">移除关注</a>
				</script>-->
			</div>
	    <!--主体内容结束-->
			   
		</div>
	</div>
	<script type="text/html" id="myGoodsTable">
		
		<table border="1px" id="my_goods_table">
			<caption>全部商品</caption>
			<tr class="tableHeadr">
				<th width="50px">
					<input type="checkbox" name="allGoodsCheck" class="layui-hide" id="goodsAllCheck" />
					<img src="img/checkNo.png" class="checkImg" name="allGoods" />
				</th>
				<th width="120px">全选</th>
				<th width="360px">&nbsp;</th>
				<th width="150px">单价</th>
				<th width="195px">数量</th>
				<th width="185px">小计</th>
				<th>操作</th>
			</tr>
			<tr class="whiteClearance h20"><td colspan="7">&nbsp;</td></tr>
			{{# layui.each(d.data, function(index,item){ }}
			<tr class="tableBodyMainer">
				<td>
					<input type="checkbox" class="layui-hide" name="singleGoodsCheck" />
					<img src="img/checkNo.png" class="checkImg" name="singleGoods" />
				</td>
				<td><img src={{item.url}} width="100px" height="100px" /></td>
				<td title={{item.title}}>
					<p class="p_title">
						{{# if(item.title.length>30){ }}
							{{item.title.substring(0,30)}}...
						{{# } }}
						{{# if(item.title.length<=30){ }}
							{{item.title}}
						{{# } }}
					</p>
				</td>
				<td>{{item.unitPrice}}</td>
				<td>
					<i class="fa fa-minus-square-o minus_i"></i>
					<input type="text" value={{item.goodsNum}} class="goodsNum" onkeyup="value=value.replace(/[^\d]/g,'')" name="goodsNum" />
					<i class="fa fa-plus-square-o plus_i"></i>
				</td>
				<td>
					<p>{{item.subtotal.subtotalPrice}}</p>
					<p>{{item.subtotal.weight}}</p>
				</td>
				<td>
					<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a> <br />
				  <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">添加关注</a> <br />
					<a class="layui-btn layui-btn-mini" lay-event="edit">移除关注</a>
				</td>
			</tr>
			<tr class="whiteClearance"><td colspan="7">&nbsp;</td></tr>
			{{# }) }}
			{{#  if(d.data.length === 0){ }}
			  无数据
			{{#  } }}
		</table>
	</script>
<script src="./plugs/layui/layui.all.js"></script>
<script src="js/goods_check.js"></script>
<script>
    layui.use(['element','jquery', "table",'laytpl'],function () {
      var element=layui.element;
      var $=layui.jquery;
      var table=layui.table;
      var laytpl=layui.laytpl;
      
       var getMyGoodsTable=function () {
          $.getJSON("json/receipt.json", function (myGoodsTableData) {
              var getTpl=myGoodsTable.innerHTML;
              var gridWrapHtml=document.getElementById("grid_wrap");
              layui.use("laytpl", function () {
                  layui.laytpl(getTpl).render(myGoodsTableData, function (html) {
                      gridWrapHtml.innerHTML=html
                      element.init();
                  })
              })
          })
      }
      getMyGoodsTable();
       
      $("#grid_wrap").on("click", "img.checkImg", function(){
	    	
	    	var nowSrc=$(this).attr("src");
	    	var nowName=$(this).attr("name");
	    	if(nowSrc.indexOf("checkNo")>0){
	    		$(this).attr("src", "img/checkYes.png");
	    		$(this).siblings("input").attr("checked", true);
	    		if(nowName=="allGoods"){
	    			$(".tableBodyMainer .checkImg").each(function(){
	    				$(this).attr("src", "img/checkYes.png");
	    				$(this).siblings("input").attr("checked", true);
	    			});
	    		}
	    		
	    	}else{
	    		$(this).attr("src", "img/checkNo.png");
	    		$(this).siblings("input").attr("checked", false);
	    		if(nowName=="allGoods"){
	    			$(".tableBodyMainer .checkImg").each(function(){
	    				$(this).attr("src", "img/checkNo.png");
	    				$(this).siblings("input").attr("checked", false);
	    			});
	    		}
	    	}
	    	
	    });

    })
</script>
</body>
</html>
